<template>
	<view>
		<view class="weather sunny"></view>
		<view class="weather cloudy"></view>
		<view class="weather rainy"></view>
		<view class="weather snowy"></view>
		<soure :url="url"></soure>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'https://blog.csdn.net/llll789789/article/details/97687538'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color;
	}

	.weather {
		position: relative;
		display: inline-block;
		width: 185px;
		height: 200px;
	}

	.sunny:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60px;
		height: 60px;
		background: #F6D963;
		border-radius: 50%;
		box-shadow: 0 0 20px #ff0;
		z-index: 2;
	}

	.sunny:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -45px 0 0 -45px;
		width: 90px;
		height: 90px;
		background: #FFEB3B;
		clip-path: polygon(50% 0%,
			65.43% 25%,
			93.3% 25%,
			78.87% 50%,
			93.3% 75%,
			64.43% 75%,
			50% 100%,
			35.57% 75%,
			6.7% 75%,
			21.13% 50%,
			6.7% 25%,
			35.57% 25%);
		z-index: 1;
		animation: sunScale 2s linear infinite;
	}

	@keyframes sunScale {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
		}

		100% {
			transform: scale(1);
		}
	}

	.cloudy:before,
	.rainy:before,
	.snowy:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 25%;
		transform: translate(-50%, -50%);
		width: 36px;
		height: 36px;
		background: #fff;
		border-radius: 50%;
		box-shadow:
			#fff 22px -15px 0 6px,
			#fff 57px -6px 0 2px,
			#fff 87px 4px 0 -4px,
			#fff 33px 6px 0 6px,
			#fff 61px 6px 0 2px,
			#ccc 29px -23px 0 6px,
			#ccc 64px -14px 0 2px,
			#ccc 94px -4px 0 -4px;
		z-index: 2;
	}

	.cloudy:before {
		animation: cloudMove 2s linear infinite;
	}

	@keyframes cloudMove {
		0% {
			transform: translate(-50%, -50%);
		}

		50% {
			transform: translate(-50%, -60%);
		}

		100% {
			transform: translate(-50%, -50%);
		}
	}

	.rainy:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 25%;
		width: 4px;
		height: 14px;
		background: #fff;
		border-radius: 2px;
		box-shadow:
			#fff 25px -10px 0,
			#fff 50px 0 0,
			#fff 75px -10px 0,
			#fff 0 25px 0,
			#fff 25px 15px 0,
			#fff 50px 25px 0,
			#fff 75px 15px 0,
			#fff 0 50px 0,
			#fff 25px 40px 0,
			#fff 50px 50px 0,
			#fff 75px 40px 0;
		animation: rainDrop 2s linear infinite;
	}

	@keyframes rainDrop {
		0% {
			transform: translate(0, 0) rotate(10deg);
		}

		100% {
			transform: translate(-4px, 24px) rotate(10deg);
			box-shadow:
				#fff 25px -10px 0,
				#fff 50px 0 0,
				#fff 75px -10px 0,
				#fff 0 25px 0,
				#fff 25px 15px 0,
				#fff 50px 25px 0,
				#fff 75px 15px 0,
				rgba(255, 255, 255, 0) 0 50px 0,
				rgba(255, 255, 255, 0) 25px 40px 0,
				rgba(255, 255, 255, 0) 50px 50px 0,
				rgba(255, 255, 255, 0) 75px 40px 0;
		}
	}

	.snowy:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 25%;
		width: 8px;
		height: 8px;
		background: #fff;
		border-radius: 50%;
		box-shadow:
			#fff 25px -10px 0,
			#fff 50px 0 0,
			#fff 75px -10px 0,
			#fff 0 25px 0,
			#fff 25px 15px 0,
			#fff 50px 25px 0,
			#fff 75px 15px 0,
			#fff 0 50px 0,
			#fff 25px 40px 0,
			#fff 50px 50px 0,
			#fff 75px 40px 0;
		animation: snowDrop 2s linear infinite;
	}

	@keyframes snowDrop {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(25px);
			box-shadow:
				#fff 25px -10px 0,
				#fff 50px 0 0,
				#fff 75px -10px 0,
				#fff 0 25px 0,
				#fff 25px 15px 0,
				#fff 50px 25px 0,
				#fff 75px 15px 0,
				rgba(255, 255, 255, 0) 0 50px 0,
				rgba(255, 255, 255, 0) 25px 40px 0,
				rgba(255, 255, 255, 0) 50px 50px 0,
				rgba(255, 255, 255, 0) 75px 40px 0;
		}
	}
</style>
